<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<title>WebSocket Test</title>
	<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
	<script language="javascript" type="text/javascript">
		var wsUri = "ws://192.168.1.89:9989/";
		var output;
        var registers;

		var elements = null;
		
        $(document).ready(function(){
            output = $("#output");
            registers = $("#registers")
            
            var websocket = new WebSocket(wsUri);
            websocket.onopen = function(evt) { 
                output.html(output.html() + "Connected<br/>")
            };
            websocket.onclose = function(evt) { 
                output.html(output.html() + "Disconnected<br/>")
            };
            websocket.onerror = function(evt) {
                output.html(output.html() + "Error " + evt.data + "<br/>")
            };
            websocket.onmessage = function(evt) {
                var e = $.parseJSON(evt.data);
                
                if (e.type == "registers")
                {
                    output.html(e);
                    if (elements == null)
                    {
                        // Initialize structure
                        elements = {};
                        for (var node in e.data)
                        {
                            if (e.data.hasOwnProperty(node))
                            {
                                // Add new node to HTML file
                                registers.append("<h2>" + node + "</h2>");
                                elements[node] = {};
                                for (var register in e.data[node])
                                {
                                    if (e.data.hasOwnProperty(node))
                                    {
                                        registers.append("<b>" + register
                                            + ":</b> <span id='" + register + "'>"
                                            + e.data[node][register] + "</span><br/>");
                                        elements[node][register] = $("#" + register);
                                    }
                                }
                            }
                        }
                    }
                    else
                    {
                        // Elements were already displayed, update them
                        for (var node in e.data)
                        {
                            if (e.data.hasOwnProperty(node))
                            {
                                for (var register in e.data[node])
                                {
                                    if (e.data.hasOwnProperty(node))
                                    {
                                        elements[node][register].html(e.data[node][register]);
                                    }
                                }
                            }
                        }
                    }
                }
                else
                {
                    console.log("type: " + evt.type);
                }
                
            };
        });
        
		
		
	</script>  
	</head>
	<body>
	<h2>WebSocket Test</h2>
	<div id="registers">
		
	</div>
	<div id="output">
        <b>Log:</b><br/>
    </div>
	</body>
</html>